<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Panel - Unicorn Tests</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link type="text/css" rel="stylesheet" href="../assets/demo/demo.css" />
<link type="text/css" rel="stylesheet" href="../yui/logger/assets/logger.css" />     
<link type="text/css" rel="stylesheet" href="../assets/testlogger.css" />

<script type="text/javascript" src="../yui-base.source.js"></script>
<script type="text/javascript" src="../yui/logger/logger.js"></script>
<script type="text/javascript" src="../yui/yuitest/yuitest.js"></script>

<script type="text/javascript" src="../build/core/Unicorn.source.js"></script>
<script type="text/javascript" src="../build/core/lang.source.js"></script>

<script type="text/javascript" src="../build/util/util.source.js"></script>
<script type="text/javascript" src="../build/util/Dom.source.js"></script>
<script type="text/javascript" src="../build/util/Event.source.js"></script>
<script type="text/javascript" src="../build/util/Effect.source.js"></script>

<script type="text/javascript" src="../build/widget/WidgetHelper.source.js"></script>
<script type="text/javascript" src="../build/widget/panel/Panel.source.js"></script>

<script type="text/javascript" src="jslib/jquery.js"></script>
</head>

<body>

<!-- test widget.Panel -->
<style type="text/css">
	.panel { width: 300px; border: 1px solid #6997D1; margin: 10px }
	.panel-hd { padding: 5px; background: #E3F1FF; height: 17px }
	.panel-bd { padding: 10px; border-top: 1px solid #6997D1 }
	.panel-hd-text { float: left }
	
	.panel .tool {
		float: right; height: 15px; width: 15px; overflow: hidden;
		background: url('../assets/demo/tool-sprites.gif') no-repeat 0 0;
		cursor: pointer
		}
	.panel .tool-toggle { background-position: 0 -60px }
	.panel .tool-toggle-over { background-position: -15px -60px }
	.collapsed .tool-toggle { background-position: 0 -75px }
	.collapsed .tool-toggle-over { background-position: -15px -75px }
	
	.draggable-panel { background: #FFF; z-index: 999 }
	
</style>
<div class="panel" id="demo1">
	<div class="panel-hd" id="demo1-hd" style="cursor: pointer"><span class="panel-hd-text">标题#demo1</span></div>
	<div class="panel-bd" id="demo1-bd">
		Unicorn.util.Anim = null;<br />
		Unicorn.widget.Panel.decorate('demo1', {collapsible: true, titleCollapse: true} );<br />
		Unicorn.util.Anim = YAHOO.util.Anim;<br />
	</div>
</div>

<div class="panel" id="demo2">
	<div class="panel-hd"><span class="panel-hd-text">标题#demo2</span></div>
	<div class="panel-bd">
		Unicorn.widget.Panel.decorate('demo2', {collapsible: true, titleCollapse: true} );
	</div>
</div>

<div class="panel" id="demo3">
	<div class="panel-hd"><span class="panel-hd-text">标题#demo3</span></div>
	<div class="panel-bd">
		Unicorn.widget.Panel.decorate('demo3', {collapsible: true} );
		<div class="panel" id="demo4" style="width: 250px">
			<div class="panel-hd"><span class="panel-hd-text">标题#demo4</span></div>
			<div class="panel-bd">
				Unicorn.widget.Panel.decorate('demo4', {collapsible: true} );
			</div>
		</div>
		<div class="panel" id="demo5" style="width: 250px">
			<div class="panel-hd"><span class="panel-hd-text">标题#demo5</span></div>
			<div class="panel-bd">
				Unicorn.widget.Panel.decorate('demo5', {collapsible: true, collapsed: true} );
			</div>
		</div>
	</div>
</div>

<div class="panel" id="demo6">
	<div class="panel-hd"><span class="panel-hd-text">标题#demo6</span></div>
	<div class="panel-bd">
		Unicorn.widget.Panel.decorate('demo6', {
			collapsible: true,
			events: {
					onExpand: function(pl) { pl.head.firstChild.innerHTML = 'I am expanded.' },
					onCollapse: function(pl) { pl.head.firstChild.innerHTML = 'I am collapsed.' }
				}
			});
	</div>
</div>

<script type="text/javascript">	
(function() {
	
	var Assert = YAHOO.util.Assert,
		ObjectAssert = YAHOO.util.ObjectAssert,
		ArrayAssert = YAHOO.util.ArrayAssert;
	var D = Unicorn.util.Dom,
		E = Unicorn.util.Event;
					
	var testCase = new YAHOO.tool.TestCase({
		//name of the test case
		name: "Unicorn TestCase",
		
		test_widget_Panel: function() {
			YAHOO.log('开始 test_widget_Panel', 'case', 'testCase');
			YAHOO.log(' - 请手动测试左边各个panel效果是否正常', 'wait', 'testCase');
			
			Unicorn.util.Anim = null;
			Unicorn.widget.Panel.decorate('demo1', {collapsible: true, titleCollapse: true} );
			Unicorn.util.Anim = YAHOO.util.Anim;
			//$('#demo1-hd').click(function() { $('#demo1-bd').slideToggle(); });
			
			Unicorn.widget.Panel.decorate('demo2', {collapsible: true, titleCollapse: true} );
			
			Unicorn.widget.Panel.decorate('demo3', {collapsible: true} );
			
			Unicorn.widget.Panel.decorate('demo4', {collapsible: true} );
			
			Unicorn.widget.Panel.decorate('demo5', {collapsible: true, collapsed: true} );
			
			Unicorn.widget.Panel.decorate('demo6', {
				collapsible: true,
				events: {
						onExpand: function(pl) { pl.head.firstChild.innerHTML = 'I am expanded.' },
						onCollapse: function(pl) { pl.head.firstChild.innerHTML = 'I am collapsed.' }
					}
				});
			
			YAHOO.log('结束 test_widget_Panel', 'case', 'testCase');
		} 
	});
	
	var suite = new YAHOO.tool.TestSuite("testSuite");
	suite.add(testCase);
	
	YAHOO.util.Event.onDOMReady(function (){
		//create the logger
		var logger = new YAHOO.tool.TestLogger();
		
		//add the tests
		YAHOO.tool.TestRunner.add(suite);

		if (parent && parent != window) {
			YAHOO.tool.TestManager.load();
		} else {
			YAHOO.tool.TestRunner.run();
		}
	});
})();
</script>
</body>
</html>
